<script setup lang="ts">
  import { nextTick, ref } from 'vue'
  import OaPosting from './oa-posting/list.vue'
  import SparePartApplyPosting from './posting-msg-push-node-list/index.vue'
  import RepairPosting from './posting-msg-push-node-list/index.vue'

  defineOptions({
    name: 'CheckSettingStorePosting',
  })

  const activeTabName = ref<'oaPosting' | 'sparePartApplyPosting' | 'repairPosting'>('oaPosting')
  const oaPostingInstance = ref<InstanceType<typeof OaPosting> | null>(null)
  const sparePartApplyPostingInstance = ref<InstanceType<typeof SparePartApplyPosting> | null>(null)
  const repairPostingInstance = ref<InstanceType<typeof RepairPosting> | null>(null)

  const getList = () => {
    nextTick(() => {
      if (activeTabName.value === 'oaPosting' && oaPostingInstance.value) {
        oaPostingInstance.value.getList()
      }

      if (activeTabName.value === 'sparePartApplyPosting' && sparePartApplyPostingInstance.value) {
        sparePartApplyPostingInstance.value.getList()
      }

      if (activeTabName.value === 'repairPosting' && repairPostingInstance.value) {
        repairPostingInstance.value.getList()
      }
    })
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div class="store-posting-component">
    <el-tabs v-model="activeTabName" @tab-change="getList">
      <el-tab-pane label="OA过账" name="oaPosting">
        <oa-posting ref="oaPostingInstance" />
      </el-tab-pane>
      <el-tab-pane label="配件申请单过账" name="sparePartApplyPosting">
        <spare-part-apply-posting ref="sparePartApplyPostingInstance" :type="'sparePartApply'" />
      </el-tab-pane>
      <el-tab-pane label="返厂单过账" name="repairPosting">
        <repair-posting ref="repairPostingInstance" :type="'repair'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
  .store-posting-component {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px 12px 12px;

    :deep(.el-tabs) {
      width: 100%;
      height: 100%;

      .el-tabs__content {
        flex: 1;
        height: 0;

        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
</style>
